<template>
	<div
        class="cvu-col"
        :style="style"
    >
        <slot />
    </div>
</template>

<script>
function parseFlex(flex) {
    if (typeof flex === 'number') {
        return `${flex} ${flex} auto`;
    }

    if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
        return `0 0 ${flex}`;
    }

    return flex;
}
export default {
    name: 'cvu-col',
    components: {},
    props: {
        // 栅格的占位格数，可选值为0~24的整数，为 0 时，相当于display:none
        span: {
            type: Number,
            default: 24
        },
        // flex 布局属性
        flex: {
            type: [Number, String],
            default: ''
        }
    },
    data() {
        return {}
    },
    computed: {
        gutter() {
            let parent = this.$parent
            while (parent && parent.$options._componentTag !== 'cvu-row') {
                parent = parent.$parent
            }
            return parent ? parent.gutter : 0
        },
        style() {
            let style = {}
            if (this.gutter !== 0) {
                style = {
                    paddingLeft: this.gutter / 2 + 'px',
                    paddingRight: this.gutter / 2 + 'px',
                    // width: `${100 * this.span / 24}%`
                };
            }
            if (this.flex) {
                style.flex = parseFlex(this.flex)
            } else {
                style.flex = parseFlex(`${100 * this.span / 24}%`)
            }
            if(this.span == 0) {
                style.display = 'none'
            }
            return style
        }
    },
    watch: {},
    methods: {}
}
</script>

<style lang="scss" scoped>
@import '../../../style/_index.scss';
</style>
